       <!-- 小组表现详情 -->
       <template>
        <div>
            <div ref="chart" style="width: 100%;height: 450px;"></div>
        </div>
    </template>

<script>
import * as echarts from 'echarts';

export default {
    name: "Performance",
    data() {
        return {
            data: {
                missionType: this.$store.state.mission,
                studentClassId: this.$store.state.current,
                targetType: 1
            },
            rank: {},
            chart: null
        }
    },
    computed: {
        studentClassId() {
            return this.$store.state.current;
        },
        missionType() {
            return this.$store.state.mission;
        }
    },
    watch: {
        studentClassId: 'fetchData',
        missionType: 'fetchData'
    },
    mounted() {
        this.fetchData();
        window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.handleResize);
        this.chart?.dispose();
    },
    methods: {
        handleResize() {
            this.chart?.resize();
        },
        async fetchData() {
            try {
                this.data.studentClassId = this.studentClassId;
                this.data.missionType = this.missionType;

                const response = await this.$axios.post("/group/missionStatsGroup", this.data);
                if (response.data?.data) {
                    this.rank = response.data.data;
                    if (this.rank.group?.length) {
                        this.rank.group = this.rank.group.map(group => {
                            return group !== null ? `第${group}组` : '未知组';
                        });
                    }
                    this.initChart();
                }
            } catch (error) {
                console.error('获取数据失败', error);
            }
        },
        initChart() {
            var xData = this.rank.group,
                yData1 = this.rank.before,
                yData2 = this.rank.during,
                yData3 = this.rank.after,
                yData4 = this.rank.score,
                borderData = [],
                legend = ["课前", "课中", "课后", "平均分"],
                colorArr = [{
                    start: "rgba(2, 201, 254,",
                    end: "rgba(17, 107, 243, 0.6)"
                },
                {
                    start: "rgba(48, 209, 188,",
                    end: "rgba(29, 152, 127, 0.6)"
                },
                {
                    start: "rgba(205, 178, 73,",
                    end: "rgba(160, 121, 60, 0.6)"
                },
                {
                    color: "#EC6941"
                }
                ];
            var normalColor = "#DEEBFF";
            //   var fontSize = 20;
            let seriesData = [];
            var borderHeight = 4;
            xData.forEach(element => {
                borderData.push(borderHeight);
            });
            [yData1, yData2, yData3, yData4].forEach((item, index) => {
                var obj1 = {};
                if (index < 3) {
                    obj1 = {
                        name: legend[index],
                        type: "bar",
                        stack: legend[index],
                        data: item,
                        barWidth: "8%",
                        label: {  // 新增 label 配置
                            show: true,
                            position: 'top', // 数值显示在条形内部
                            color: '#fff',
                            fontSize: 14,
                            formatter: '{c}',
                            distance: 20
                        },
                        itemStyle: {
                            normal: {
                                color: {
                                    type: "linear",
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: colorArr[index].start + "0.7)"
                                    },
                                    {
                                        offset: 0.5,
                                        color: colorArr[index].start + "0.3)"
                                    },
                                    {
                                        offset: 0.5,
                                        color: colorArr[index].end
                                    }
                                    ],
                                    globalCoord: false
                                }
                            }
                        }
                    };
                    var obj2 = {
                        name: "",
                        type: "bar",
                        stack: legend[index],
                        itemStyle: {
                            barBorderRadius: '2px',
                            normal: {
                                color: colorArr[index].start + "1)"
                            }
                        },
                        data: borderData
                    };
                    seriesData.push(obj1);
                    seriesData.push(obj2);
                } else {
                    var obj3 = {
                        name: legend[index],
                        type: "line",
                        yAxisIndex: 1,
                        smooth: false,
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            normal: {
                                width: 2
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: colorArr[index].color,
                                borderColor: "#fff",
                                borderWidth: 1
                            }
                        },
                        data: item,
                        label: {
                            normal: {
                                show: false
                            }
                        }
                    };
                    seriesData.push(obj3);
                }
            });

            const myChart = echarts.init(this.$refs.chart);
            const option = {
                grid: {
                    left: "3%",
                    top: "12%",
                    right: "3%",
                    bottom: '2%',
                    containLabel: true
                },
                legend: {
                    show: true,
                    // icon: "rect",
                    itemWidth: 16,
                    itemHeight: 9,
                    right: "15%",
                    top: "0%",
                    textStyle: {
                        color: "#fff",
                        fontSize: 16
                    },
                    data: legend
                },
                tooltip: {
                    trigger: "axis",
                    backgroundColor: 'rgba(18, 57, 60, .8)', //设置背景颜色
                    textStyle: {
                        color: '#fff',
                        fontSize: 16
                    },
                    borderColor: "rgba(18, 57, 60, .8)",
                    axisPointer: {
                        type: 'shadow',
                        shadowStyle: {
                            color: 'rgba(0, 11, 34, .4)',
                        }
                    },
                    formatter: function (params) {
                        var str = "";
                        for (var i = 0; i < params.length; i++) {
                            if (params[i].seriesName !== "") {
                                str +=
                                    params[i].seriesName +
                                    ':' +
                                    params[i].value +
                                    "<br/>";
                            }
                        }
                        return str;
                    }
                },
                xAxis: [{
                    type: "category",
                    data: xData,
                    axisPointer: {
                        type: "shadow"
                    },
                    axisLabel: {
                        interval: 0,
                        align: 'center',
                        textStyle: {
                            color: normalColor,
                            fontSize: 16
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#1C82C5'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    }
                }],
                yAxis: [{
                    type: "value",
                    axisLabel: {
                        formatter: "{value}",
                        textStyle: {
                            color: normalColor,
                            fontSize: 16
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#1C82C5'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "solid",
                            color: 'rgba(28, 130, 197, .3)'
                        }
                    }
                },
                {
                    type: "value",
                    axisLabel: {
                        formatter: "{value}",
                        show: false,
                        textStyle: {
                            color: normalColor,
                            fontSize: 16
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#1C82C5'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            type: "dashed",
                            color: "rgba(255,255,255,0.2)"
                        }
                    }
                }
                ],
                series: seriesData
            };

            myChart.setOption(option);
            this.chart = myChart;
        }
    }
};
</script>

<style scoped></style>